<template>
    <h-section title="预估值与标准工时设置" :collapse="!!detail.id">
        <div>
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="10">
                        <a-form-item label="标准工时" name="baseWorkHours">
                            <flexbox>
                                <a-input-number :min="0" :max="24" :precision="0" style="width: 200px" v-model:value="form.baseWorkHours" allow-clear />
                                <span class="margin-l-8">小时/天</span>
                            </flexbox>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10" />
                    <a-col :span="10">
                        <a-form-item label="1SP">
                            <flexbox>
                                <a-input-number :min="0" :max="100" :precision="0" style="width: 200px" v-model:value="form.workHourCount" allow-clear />
                                <span class="margin-l-8">标准工时 </span>
                            </flexbox>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <flexbox justify="flex-end" class="btn-group">
                <a-button type="primary" @click="handleSubmit">保存</a-button>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import api from '@/api';
import { useRouter } from 'vue-router';
import { defineComponent, ref, unref } from 'vue';
export default defineComponent({
    name: 'CreateProduct',
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const router = useRouter();
        const ruleFormRef = ref<any>();
        const rules = {
            baseWorkHours: [{ required: true, message: '标准工时不能为空', trigger: 'blur', type: 'number' }]
        };
        const form = ref<any>({
            baseWorkHours: 0,
            workHourCount: 0
        });
        const handleSubmit = async () => {
            const res = await ruleFormRef.value.validate();
            res && handleSave();
        };
        const handleSave = async () => {
            const query = {
                ...props.detail,
                ...unref(form)
            };
            const { success, errorMsg } = await api.productDetailModel.save(query);
            if (success) {
                message.success('操作成功');
                router.push({
                    path: '/setting/system/systemList'
                });
            } else {
                message.error(errorMsg);
            }
        };
        const resetForm = () => {
            form.value = {
                baseWorkHours: 0,
                workHourCount: 0
            };
        };
        const init = () => {
            resetForm();
            if (props.detail.id) {
                Object.keys(unref(form)).forEach((key) => {
                    form.value[key] = props.detail[key];
                });
            }
        };
        init();
        return {
            ruleFormRef,
            form,
            rules,
            handleSubmit
        };
    }
});
</script>
<style lang="less">
.page-wrap-ql {
    .ql-snow .ql-picker {
        line-height: 20px !important;
    }
}
</style>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
</style>